<template>
	<view class="content">
		<view class="topTab">
			<uTabs
				:list="itemList"
				lineWidth="20"
				lineColor="#08C8BD"
				:activeStyle="{
					color: '#08C8BD',
					fontWeight: 'bold',
				}"
				:inactiveStyle="{
					color: '#505E5C',
				}"
				itemStyle="width:326rpx; height: 48px;"
				@click="tabClick"
			>
			</uTabs>
		</view>
		<detail-account-card v-for="item,index in detailAccountList" :key="index"
		:info="item" @click="toDetailAccountInfo"></detail-account-card>
	</view>
</template>

<script>
	import detailAccountCard from '@/subpageA/components/detailAccountCard.vue'
	import uTabs from '@/subpageA/uview-ui/components/u-tabs/u-tabs.vue'
	
	export default {
		data() {
			return {
				itemList:[{
					name:'收入明细',
				},{
					name:'提现明细'
				}],
				
				detailAccountList:[],	//账单明细列表
				
				incomeList:[{
					item:'服务员',
					status:0,
					time:'2022.7.20 15:01:22',
					value:10
				},{
					item:'程序员',
					status:0,
					time:'2022.7.20 15:01:22',
					value:10
				},{
					item:'服务员',
					status:0,
					time:'2022.7.20 15:01:22',
					value:10
				}],
				
				withdrawList:[{
					item:'程序员',
					status:1,
					time:'2022.7.20 15:01:22',
					value:10
				},{
					item:'程序员',
					status:2,
					time:'2022.7.20 15:01:22',
					value:10
				},{
					item:'程序员',
					status:3,
					time:'2022.7.20 15:01:22',
					value:10
				},{
					item:'程序员',
					status:4,
					time:'2022.7.20 15:01:22',
					value:10
				},]
			}
		},
		components:{
			detailAccountCard,
			uTabs
		},
		onLoad() {
			this.detailAccountList=this.incomeList;
		},
		methods: {
			tabClick(name){
				console.log(name);
				if(name.index===0){
					this.detailAccountList=this.incomeList;
				}else{
					this.detailAccountList=this.withdrawList;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		width: 100%;
		min-height: 100vh;
		background-color: #F3F7F8;
		
		.topTab{
			background-color: #FFFFFF;
			border-bottom: 1px solid #F3F7F8;
		}
	}
</style>
